<template>
    <div class="tools">
        <!-- 图层树 -->
        <coverage v-show="widget.coverage" />
        <!-- 右键弹窗 -->
        <contextMenu v-if="widget.contextMenu.show" />
        <!-- 矢量绘图工具 -->
        <adobeIllustrator v-if="widget.adobeIllustrator" />
        <!-- 属性编辑对话框 -->
        <editor v-if="widget.property" />
        <!-- 统计对话框 -->
        <el-dialog v-model="widget.statistics.show" title="数据统计" width="700">
            <div class="statistics">
                <div class="item" v-for="(item, index) in widget.statistics.data" :key="index">
                    <div class="label">{{ item.name }}:</div>
                    <el-statistic class="value" v-if="item.type != 'select'" :precision="item.precision" :suffix="item.unit" :value="item.value" />
                    <el-radio-group v-model="item.value" size="small" v-else @change="unitChange(item)">
                        <el-radio-button label="平方米" value="1" />
                        <el-radio-button label="亩" value="2" />
                        <el-radio-button label="公顷" value="3" />
                    </el-radio-group>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="widget.statistics.show = false"> 关闭 </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog
            v-model="widget.uploadDialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="`上传${widget.drawItemData ? widget.drawItemData.label : ''}`"
            width="500"
            :before-close="handleClose(uploadData)"
        >
            <div class="uploadBox">
                <div v-if="uploadData.isShowMsg">
                    图层名称: <el-input v-model="uploadData.folderName" size="small" style="width: 380px" placeholder="Please input" /><br /><br />
                    文件数量：{{ uploadData.total ? uploadData.total : "计算中..." }}<br /><br />
                    文件大小：{{ uploadData.totalSize ? `${(uploadData.totalSize / 1024 / 1024).toFixed(2)}MB` : "计算中..." }}<br /><br />
                    上传进度：{{ `${uploadData.current} / ${uploadData.total}` }} <span style="margin-left: 10px">{{ uploadData.uploadFilePath }}</span
                    ><br /><br />
                    <el-progress :percentage="Math.round((uploadData.current / uploadData.total) * 100)" color="#67c23a" indeterminate striped :duration="10" striped-flow /><br />
                    <span style="font-size: 12px">上传的文件会自动过滤不需要的文件！如： .tif，.prj，.tfw，.txt，.json 等</span>
                </div>
                <div class="coverageuploadFilesBox" v-else>
                    <i class="fa fa-folder-open" style="font-size: 80px; margin: 0 200px"></i><br /><br />
                    <el-button type="primary" class="coverageuploadFiles">
                        选择文件夹
                        <input type="file" class="uploadfloderBoxInput" webkitdirectory allowdirs directory multiple @change="uploadXyzLayer($event, uploadData)" />
                    </el-button>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer" v-if="!uploadData.isShowMsg">
                    <el-button type="primary" @click="widget.uploadDialog = false">取消</el-button>
                </div>
                <div class="dialog-footer" v-else>
                    <el-button type="primary" @click="reselect(uploadData)">重新选择</el-button>
                    <el-button type="primary" @click="uploadFilesSubmit(uploadData)"> 开始上传 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import coverage from "@/views/coverage/coverage.vue";
import contextMenu from "@/components/contextMenu.vue";
import adobeIllustrator from "@/views/adobeIllustrator/adobeIllustrator.vue";
import editor from "@/views/editor/index.vue";
import { widget } from "@/utils/global";

import { handleClose, uploadXyzLayer, reselect, uploadFilesSubmit } from "@/utils/coverage/coverage";
/**
 * 统计组件面积显示单位
 */
const unitChange = (item: any) => {
    widget.statistics.data.forEach((v: any) => {
        if (v.dataType == "area") {
            if (item.value == 1) {
                v.value = v.pluralNum;
                v.unit = "㎡";
            } else if (item.value == 2) {
                v.value = v.pluralNum / 666.67;
                v.unit = "亩";
            } else if (item.value == 3) {
                v.value = v.pluralNum / 10000;
                v.unit = "公顷";
            }
        }
    });
};
/**
 * 上传金字塔瓦片图层
 */
const uploadData: any = reactive({
    total: 0, // 总文件数量
    totalSize: 0, // 总文件大小
    current: 0, // 上传进度
    folderName: "", // 上传文件夹名称
    uploadFilePath: "", // 上传文件路径
    isShowMsg: false, // 是否显示上传文件信息
    files: null, // 上传的文件列表
    flag: "", // 上传文件标识
    // uploadDialog: false, // 上传弹窗
});
</script>
